import React, { Component } from "react";
import { getExHongbao } from "../../http/api-p";
import styles from "./ex-hongbao.module.scss";

class benefit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user_id:"57784",
      exhongbao: [],
    };
  }
  // 请求数据
  async componentDidMount() {
    // 请求过期红包数据
    let exhongbao = await getExHongbao(this.state.user_id);
    // console.log(exhongbao)
    this.setState({
      exhongbao: exhongbao,
    });
  }
  // 路由跳转
  handleBackClick = (params) => {
    this.props.history.push("about");
  };
  render() {
    return (
      <div className={styles.benefit}>
        {/* elemeBalanceHead start */}
        <div className={styles.benefitHead}>
          <span
            className={styles.benefitHeadLeft}
            onClick={this.handleBackClick}
          >
            &lt;
          </span>
          <span className={styles.benefitHeadTitle}>过期红包</span>
        </div>
        {/* elemeBalanceHead start */}

{/* 即将过期 */}
<div className={styles.delat}>
    有{this.state.exhongbao.length}个红包已过期
</div>
{/* 已过期 end */}
        {/* 过期红包 */}
        {this.state.exhongbao.map((item,index) => {
          return (
            <div className={styles.hbItem} key={index}>
              <div className={styles.hbItemLeft}>
                <div className={styles.hbL1}>
                  <span>￥</span>
                  <p className={styles.amount}>{item.amount}</p>
                </div>
                <div className={styles.hbL2}>{item.description_map.sum_condition}</div>
              </div>
              <div className={styles.hbItemCen}>
                <div className={styles.hbCName}>{item.name}</div>
                <div className={styles.periods}>{item.description_map.validity_periods}</div>
                <div className={styles.hbCphone}>{item.description_map.phone}</div>
              </div>
              <div className={styles.hbItemRight}>已过期</div>
            </div>
          );
        })}
        {/* 过期红包 end */}
      </div>
    );
  }
}

export default benefit;
